<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>系统终控</title>
		<style type="text/css">
			html,
			body {
				height: 100%;
				width: 100%;
				overflow: hidden;
				margin: 0;
				padding: 0;
			}

			a {
				text-decoration: none
			}

			.box {
				background: url(./home_background.png) 50% no-repeat;
				background-size: cover;
				width: 100%;
				height: 100vh;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
			}

			/* 选择框 */
			.top-select {
				width: 100%;
				flex: 0.3;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.select {
				width: 40vw;
				height: 6vh;
				font-size: 3.2vh;
				padding-left: 1.5vw;
				border-radius: 80vw;
			}

			.select-right {
				position: absolute;
				right: 0;
				top: 0;
				width: 4vw;
				height: 6vh;
				border-top-right-radius: 80vw;
				border-bottom-right-radius: 80vw;
				background: #175BF5;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.select-right img {
				width: 1.3vw;
				height: 1.3vw;
			}



			.card-box {
				flex: 0.3;
				width: 96%;
				display: flex;
				display: -webkit-flex;
				justify-content: space-between;
				flex-direction: row;
				flex-wrap: wrap;
			}

			.card-a {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
			}

			.card-item {
				margin: 0 3.5vw;
				width: 9vw;
				height: 19vh;
				background: #175BF5;
				opacity: 0.7;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.card-img {
				width: 5vw;
				height: 8vh;
			}

			.card-title {
				font-size: 2.8vw;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 11vh;
			}

			.but-down {
				flex: 0.4;
				height: 100%;
				width: 100%;
				padding-top: 20px;
				padding-left: 20px;
				font-size: 1.9vh;
				line-height: 2.5;
			}

			.but-down-title {
				color: #fff;
				margin-top: 5vh;
				display: flex;
				align-items: center;
				padding-left: 3vw;
			}

			ul {
				display: flex;
				padding-left: 4vw;
			}

			li a {
				margin-right: 3vw;
			}

			li::marker {
				color: #FFFFFF;
			}
		</style>
		<!-- <link rel="stylesheet" type="text/css" href="css/index.css" /> -->
	</head>
	<body>
		<div class="box" id="app">
			<div class="top-select">
				<div style="position: relative;">
					<select class="select" @change="changeSelect">
						<option v-for="(item,index) in selectList" :key="index" selected="" :value="item.value">{{item.lable}}</option>
					</select>
					<div class="select-right">
						<img src="home_select_icon.png">
					</div>
				</div>
			</div>
			<div class="card-box">
				<a :href="item.path" v-for="(item,index) in cardList" :key="index" class="card-a">
					<div class="card-item">

						<img :src="item.img" class="card-img">
					</div>
					<div class="card-title">
						{{item.value}}
					</div>
				</a>
			</div>
			<div class="but-down">
				<div class="but-down-title">
					软件下载：<img style="width: 1vw;" src="home_down.png">
				</div>
				<ul>
					<li><a href="./thaupload.zip" style="color:#fff">地贫实验数据上报软件</a></li>
					<li><a href="./jre-8u261-windows-i586.exe" style="color:#fff">JavaSDK</a></li>
					<li><a href="./dotNetFx40_Full_x86_x64.exe" style="color:#fff">dotNetFx40</a></li>
				</ul>
			</div>
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
	<script type="text/javascript">
		var app = new Vue({
			el: '#app',
			data() {
				return {
					data: '11111',
					selectList: [{
						value: '湖南省',
						lable: '湖南省'
					}],
					cardList: [{
							id: 7,
							value: '长沙',
							path: 'http://jk.gdxybiotech.com/changsha/#/login',
							img: './home_huaihua.png'
						}, {
							id: 1,
							value: '岳阳',
							path: 'http://jk.gdxybiotech.com/yueyang/#/login',
							img: './home_yueyang.png'

						},
						{
							id: 2,
							value: '株洲',
							path: 'http://jk.gdxybiotech.com/zhuzhou/#/login',
							img: './home_zhuzhou.png'
						},
						{
							id: 3,
							value: '郴州',
							path: 'http://jk.gdxybiotech.com/chenzhou/#/login',
							img: './home_chenzhou.png'
						},
						{
							id: 4,
							value: '益阳',
							path: 'http://jk.gdxybiotech.com/yiyang/#/login',
							img: './home_yiyang.png'
						},
						{
							id: 5,
							value: '邵阳',
							path: 'http://jk.gdxybiotech.com/shaoyang/#/login',
							img: './home_shaoyang.png'
						},
						{
							id: 6,
							value: '怀化',
							path: 'http://jk.gdxybiotech.com/huaihua/#/login',
							img: './home_huaihua.png'
						},
					]
				}
			},
			created() {
				console.log(11);
			},
			methods: {
				changeSelect(value) {
					console.log(value);
				}
			}
		})
	</script>
</html>
